import React, { useEffect, useState, Suspense } from 'react'
import { UnorderedListOutlined, UserOutlined } from '@ant-design/icons';
import { useLocation, useNavigate, Outlet } from 'react-router-dom'
import { Avatar, Drawer, Grid, Col, Row } from 'antd';

import styles from './index.module.css'

import PageLoading from '../../component/pageLoading'
import { removeAllCache } from '../../utils/cache'

//跳转工具类
import { jumpTo } from '../../jump'

import moment from "moment";


//新主页面
function Main01() {
    const [open, setOpen] = useState(false);
    //导航
    let navigate = useNavigate()
    //获取路由传参
    let location = useLocation()

    const [time, setTIme] = useState('');
    const [week, setWeek] = useState('');

    //[]空数组相当于componentDidMount
    useEffect(() => {
        const intervalId = setInterval(function () {
            // getCurryTime()
            // getWeek()
        }, 1000 * 1);
        initData()

        return () => {
            clearInterval(intervalId);
        }
    }, []);

    function initData() {
        const argument = location.state;
        if (argument == null) {
            return
        }
        const isLogin = argument.tag
        if (isLogin === '1') {
            jumpTo(navigate, '/main/board', true, null)
        }
    }


    function getCurryTime() {
        const now = moment();
        moment.locale('zh-cn')
        setTIme(now.format('YYYY-MM-DD HH:mm:ss'))
    }


    function getWeek() {
        const options = { weekday: 'long' };
        const today = new Date();
        setWeek(today.toLocaleDateString('zh-CN', options))
    }


    function clickFunctionMenu() {
        setOpen(true);
    }

    function onClose() {
        setOpen(false);
    }

    function click01() {
        setOpen(false);
        jumpTo(navigate, '/main/board', true, null)
    }
    function click02() {
        setOpen(false);
        jumpTo(navigate, '/main/test01', true, null)
    }
    function click03() {
        setOpen(false);
        jumpTo(navigate, '/main/test02', true, null)
    }

    function getItem() {
        console.log('111');
        for (let i = 0; i < 10; i++) {
            console.log('222');
            return <Col span={6}>
                <div className={styles.box1} >col-6</div>
            </Col>
        }

    }

    const array = [0, 2, 2, 3, 5, 36, 87,]



    return (
        <div className={styles.root}>
            <Drawer closable={false} onClose={onClose} open={open} width={400}>
                <p onClick={click01}>1、Some contents...</p>
                <p onClick={click02}>2、Some contents...</p>
                <p onClick={click03}>3、Some contents...</p>
                <Row gutter={6}>
                    {array.map((item, index) => {
                        return (
                            <Col key={index} span={6}>
                                <div className={styles.box1} >col+++{index}----{item}</div>
                            </Col>
                        );
                    })}
                </Row>
            </Drawer>
            <div className={styles.head}>
                <Avatar className={styles.avatar} size={32} icon={<UserOutlined />} />
                <Avatar onClick={clickFunctionMenu} className={styles.avatar} size={32} icon={<UnorderedListOutlined />} />
                <div className={styles.time}>
                    <span className={styles.time1}>{time}</span>
                    <span className={styles.time2}>{week}</span>
                </div>
            </div>
            <Suspense fallback={<PageLoading />}>
                <Outlet ></Outlet>
            </Suspense>
        </div>

    )
}

export default Main01;
